<template>
	<view style="padding-left: 20rpx; padding-right: 20rpx;">

		<u-form :model="addModel" ref="form1">
			<u-form-item prop="name" label-width="150rpx" label="类型:">
				<u-radio-group v-model="addModel.name">
					<u-radio @change="radioChange" active-color="#00cc33" v-for="(item, index) in list" :key="index"
						:name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="goodsName" label-width="150rpx" label="名称:">
				<u-input placeholder="请输入名称" v-model="addModel.goodsName"></u-input>
			</u-form-item>
			<u-form-item prop="categoryName" label-width="150rpx" label="分类:">
				<u-input @click="openSelect" disabled placeholder="请选择分类" v-model="addModel.categoryName"></u-input>
				<!-- <u-select @confirm="selectConfirm" v-model="show" :list="selectList"></u-select> -->
				<u-select @confirm="selectConfirm" v-model="show" :list="selectList"></u-select>
			</u-form-item>
			<u-form-item prop="goodsDesc" label-width="150rpx" label="简介:">
				<u-input placeholder="请输入简介" v-model="addModel.goodsDesc"></u-input>
			</u-form-item>
			<u-form-item prop="goodsPrice" label-width="150rpx" label="价格:">
				<u-input placeholder="请输入价格" v-model="addModel.goodsPrice"></u-input>
			</u-form-item>
			<u-form-item prop="userName" label-width="150rpx" label="联系人:">
				<u-input placeholder="请输入联系人" v-model="addModel.userName"></u-input>
			</u-form-item>
			<u-form-item prop="phone" label-width="150rpx" label="联系电话:">
				<u-input placeholder="请输入联系电话" v-model="addModel.phone"></u-input>
			</u-form-item>
			<u-form-item prop="wxNum" label-width="150rpx" label="微信号:">
				<u-input placeholder="请输入微信号" v-model="addModel.wxNum"></u-input>
			</u-form-item>
			<u-form-item prop="address" label-width="150rpx" label="联系地址:">
				<u-input placeholder="请输入地址" v-model="addModel.address"></u-input>
			</u-form-item>
			<u-form-item prop="image" label-width="150rpx" label="图片:"></u-form-item>
			<u-upload ref="imgRef" :file-list="fileList" :action="action" @on-change="onChange"
				@on-remove="onRemove"></u-upload>
		</u-form>
		<u-button @click="commit" :custom-style="customStyle">确认修改</u-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		categoryApi,
		editApi
	} from '../../api/goods';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';
	import http from '../../common/http';
	const list = [{
			value: '0',
			name: '闲置',
			disable: false
		},
		{
			value: '1',
			name: '求购',
			disable: false
		}
	];

	const form1 = ref()

	// 闲置求购类型选择
	const radioChange = (e) => {
		console.log(e);
		for (let i = 0; i < list.length; i++) {
			if (list[i].name == e) {
				addModel.type = list[i].value
			}
		}
	}

	const addModel = reactive({
		userId: uni.getStorageSync('userId'),
		name: '',
		type: '',
		goodsName: '',
		categoryId: '',
		categoryName: '',
		goodsDesc: '',
		goodsPrice: '',
		userName: '',
		phone: '',
		wxNum: '',
		image: '',
		address: ''
	})

	const fileList = ref([])
	const customStyle = {
		marginTop: '30rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
		backgroundColor: '#00cc33',
		color: '#fff',
		with: "100%"
	}

	// 下拉菜单显示与否
	const show = ref(false)

	// 分类数据
	const cageId = ref('')
	const selectList = ref([])
	const getSelectList = async () => {
		let res = await categoryApi()
		if (res && res.code == 200) {
			console.log(res);
			selectList.value = res.data;
			// 设置分类
			if (cageId.value) {
				for (let k = 0; k < selectList.value.length; k++) {
					if (selectList.value[k].value == cageId.value) {
						addModel.categoryName = selectList.value[k].label;
					}
				}
			}
		}
	}

	onReady(() => {
		//设置表单验证规则
		form1.value.setRules(rules);
		//设置图片回显
		imgRef.value.lists = fileList.value
		getSelectList()
	})
	// 打开分类下拉菜单
	const openSelect = () => {
		console.log('openSelect');
		show.value = true;
	}

	// 选中分类
	const selectConfirm = (e) => {
		console.log('selectConfirm');
		console.log(e);
		addModel.categoryId = e[0].value;
		addModel.categoryName = e[0].label;
	}
	const imgRef = ref()
	// 提交
	const commit = () => {
		console.log(addModel)
		form1.value.validate(async (valid) => {
			if (valid) {
				let res = await editApi(addModel)
				if (res && res.code == 200) {
					console.log(res)
					uni.navigateTo({
						url: '../my_unused/my_unused'
					})
					//清空数据
					form1.value.resetFields()
					imgUrl.value = []
					addModel.image = '';
					fileList.value = []
					imgRef.value.clear()
				}
			}
		})
	}

	const action = ref(http.baseUrl + "/api/upload/uploadImage");

	// 上传的图片列表，最后要拼接成一个字符串给后端，表示该商品的图片列表
	const imgUrl = ref([]);

	const onChange = (res, index, lists, name) => {
		console.log(res.data);
		let result = JSON.parse(res.data);
		// 把新上传的图片放入imgUrl
		imgUrl.value.push(http.baseUrl + result.data)
		console.log(imgUrl.value)

		// 把imgUrl里的所有图片用逗号拼接起来
		// let url = imgUrl.value.join(",")
		// addModel.image = url;
		let url = ''
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		//去掉末尾的逗号
		addModel.image = url.substring(0, url.lastIndexOf(','))
		console.log("final url:" + addModel.image);
		console.log(addModel);
	}

	const onRemove = (index) => {
		// 从imgUrl删除指定元素的图片地址
		imgUrl.value.splice(index, 1);
		addModel.image = imgUrl.value.join(",");
		console.log(addModel)
	}

	const rules = reactive({
		name: [{
			required: true,
			message: '请选择类型',
			trigger: ['change', 'blur'],
		}],
		goodsName: [{
			required: true,
			message: '请填写名称',
			trigger: ['change', 'blur'],
		}],
		goodsDesc: [{
			required: true,
			message: '请填写描述',
			trigger: ['change', 'blur'],
		}],
		goodsPrice: [{
			required: true,
			message: '请填写价格',
			trigger: ['change', 'blur'],
		}],
		userName: [{
			required: true,
			message: '请填写姓名',
			trigger: ['change', 'blur'],
		}],
		phone: [{
			required: true,
			message: '请填写电话',
			trigger: ['change', 'blur'],
		}],
		wxNum: [{
			required: true,
			message: '请填写微信号',
			trigger: ['change', 'blur'],
		}],
		address: [{
			required: true,
			message: '请填写发布/求购地址',
			trigger: ['change', 'blur'],
		}]
	});

	onLoad((options) => {
		imgUrl.value = [];
		fileList.value = [];
		const goods = JSON.parse(options.goods)
		cageId.value = goods.categoryId;
		// console.log(goods)
		// 回显数据
		addModel.goodsId = goods.goodsId;
		addModel.categoryId = goods.categoryId;
		addModel.image = goods.image;
		//物品的图片回显
		if (goods.image) {
			let imgs = goods.image.split(",");
			for (let g = 0; g < imgs.length; g++) {
				imgUrl.value.push(imgs[g]);
				let obj = {
					url: ''
				}
				obj.url = imgs[g]
				fileList.value.push(obj)
			}
		}
		addModel.goodsName = goods.goodsName;
		addModel.goodsDesc = goods.goodsDesc;
		addModel.address = goods.address;
		addModel.goodsPrice = goods.goodsPrice
		addModel.userName = goods.userName;
		addModel.phone = goods.phone
		addModel.type = goods.type
		addModel.wxNum = goods.wxNum
		//回显商品类型
		for (let i = 0; i < list.length; i++) {
			if (list[i].value == goods.type) {
				addModel.name = list[i].name;
			}
		}

	})
</script>

<style>
</style>